{extend name="main"}
{block name="body"}

<div class="bg-white mb-3">


    <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">
        <el-form-item label="任务名称" prop="title" class="flex mb-0 pl-3">
            <el-input v-model="search.title" placeholder="请输入你想搜索的关键词"></el-input>
        </el-form-item>
        <el-form-item class="flex mb-0 pl-3">
            <el-button type="primary" @click="initHtml">查询</el-button>
            <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
        <el-form-item>
            <div class="flex mb-0 pl-3">
                <el-button type="primary"  @click="window.open('/work-wechat/addMassTask')">新建任务</el-button>
            </div>
        </el-form-item>
    </el-form>
    <div style="background-color:#fff7f0;color: #f59A23;margin-bottom: 5px;">
        <div style="flex: 1 1 0%;padding: 20px">
            <span>当前列表信息新建任务会有延迟，请等待一段时间后进行刷新获取最新推送记录</span>
        </div>
    </div>
</div>
<div class="bg-white p-3">

    <div class="table-responsive">
        <el-table ref="tableList" :data="tableData" v-loading="search.ajax" style="width: 100%;"
                  header-cell-class-name="table-header-DDE6FB">

            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="title" label="任务名称" width="200">
            </el-table-column>
            <el-table-column  label="推送类型" width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.chat_type=='single'">客户</span>
                    <span v-else>客户群</span>
                </template>
            </el-table-column>
            <el-table-column  label="推送内容" >
                <template slot-scope="scope">
                    <el-popover
                            placement="top-start"
                            title="推送语2"
                            trigger="hover"
                         v-if="scope.row.item_data!=null"  >

                            <el-image v-if="scope.row.content_type==1"
                                style="width: 100px; height: 100px"
                                :src="scope.row.item_data.pic_url"
                                fit="contain">
                            </el-image>
                        <div v-else-if="scope.row.content_type==2">
                            <span >标题：{{scope.row.item_data.title}} </span>
                            <span >链接：{{scope.row.item_data.url}} </span>
                            <span >描述：{{scope.row.item_data.desc}} </span>
                            <el-image
                                      style="width: 100px; height: 100px"
                                      :src="scope.row.item_data.picurl"
                                      fit="contain">
                            </el-image>
                        </div>

                        <div v-else>
                            <p >标题：{{scope.row.item_data.title}} </p>
                            <p >appId：{{scope.row.item_data.appid}} </p>
                            <p >Page：{{scope.row.item_data.page}} </p>
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="scope.row.item_data.picurl"
                                    fit="contain">
                            </el-image>
                        </div>


                        <span slot="reference">{{ scope.row.content }}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template slot-scope="scope">
                    <div class="small">
                        <div>{{ scope.row.create_time }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <div v-if="!scope.row.delete_time">
                        <el-button type="primary" plain size="mini"
                                   @click="window.open('/work-wechat/massTaskDetails/'+scope.row.id)">
                            详情
                        </el-button>
<!--                        <el-button type="danger" plain size="mini" @click="delWelcome(scope.row.id)">-->
<!--                            删除-->
<!--                        </el-button>-->
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="search.page" :page-sizes="[10,50,100,200]" :page-size="search.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            view: XYBase.view,
            defaultProps: {
                value: 'id',
                label: 'title',
                children: 'data'
            },
            search: {
                title: '',
                // status:'all',
                ajax: false,
                page: 1,
                total: 0,
                pageSize: 10
            },
            tableData: [],
        },
        watch: {
            view: XYBase.viewWatch,
        },
        created() {
            XYBase.created(this);
        },
        methods: {

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(val) {
                this.search.page = 1;
                this.search.pageSize = val;
                this.initHtml();
            },
            handleCurrentChange(val) {
                this.search.page = val;
                this.initHtml();
            },



            initHtml() {
                var _this = this;
                _this.search.ajax = true;
                $.ajax({
                    url: '',
                    type: 'get',
                    data: _this.search,
                    dataType: 'json',
                    error: function (err) {
                        _this.search.ajax = false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (ret) {
                        _this.search.ajax = false;
                        if (ret) {
                            if (ret.code === 0) {
                                _this.search.total = ret.data.total;
                                _this.tableData = ret.data.data;
                                _this.tableData.filter((item)=>{
                                    item.item_data=JSON.parse(item.item_data)
                                })
                                console.log(_this.tableData)
                            } else {
                                XYBase.msg(ret.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        }
    });
    $(function () {
        vm.initHtml();
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}